<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">用户中心</h1>
    <div class="flex flex-col lg:flex-row gap-8">
      <div class="lg:w-1/4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="bg-primary p-6 text-white">
            <div class="flex items-center">
              <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4">
                <i class="fa fa-user text-2xl"></i>
              </div>
              <div>
                <h3 class="font-medium">{{ user.name }}</h3>
                <p class="text-white/80 text-sm">{{ user.email }}</p>
              </div>
            </div>
          </div>
          <div class="p-4">
            <ul class="space-y-1">
              <li>
                <router-link 
                  to="/user" 
                  class="block py-3 px-4 rounded-md bg-gray-50 text-primary font-medium"
                >
                  <i class="fa fa-user-circle mr-2"></i>个人信息
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/user/orders" 
                  class="block py-3 px-4 rounded-md hover:bg-gray-50 transition-colors"
                >
                  <i class="fa fa-shopping-bag mr-2"></i>我的订单
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/user/address" 
                  class="block py-3 px-4 rounded-md hover:bg-gray-50 transition-colors"
                >
                  <i class="fa fa-map-marker mr-2"></i>收货地址
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/user/favorites" 
                  class="block py-3 px-4 rounded-md hover:bg-gray-50 transition-colors"
                >
                  <i class="fa fa-heart mr-2"></i>我的收藏
                </router-link>
              </li>
              <li>
                <button 
                  class="w-full text-left py-3 px-4 rounded-md hover:bg-gray-50 transition-colors text-gray-700"
                  @click="logout"
                >
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="lg:w-3/4">
        <div class="bg-white rounded-lg shadow-sm p-6">
          <h2 class="text-xl font-bold mb-6">个人信息</h2>
          <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-gray-700 mb-2">用户名</label>
                <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" value="张三" disabled>
              </div>
              <div>
                <label class="block text-gray-700 mb-2">手机号码</label>
                <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" value="13800138000" disabled>
              </div>
              <div>
                <label class="block text-gray-700 mb-2">电子邮箱</label>
                <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" value="example@mail.com" disabled>
              </div>
              <div>
                <label class="block text-gray-700 mb-2">注册日期</label>
                <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50" value="2023-01-01" disabled>
              </div>
            </div>
            <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md transition-colors">
              修改信息
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const user = ref({
  name: '张三',
  email: 'example@mail.com'
})

const logout = () => {
  store.dispatch('logout')
  router.push('/')
}
</script>    